<template>
  <div id="paas_content">
    <el-dialog
      title="题目信息"
      :visible.sync="addQuestionDialog"
      width="60%"
      center
      :before-close="handleClose"
    >
      <el-form
        ref="organizationReport"
        :model="questionReport"
        label-width="130px"
        label-position="right"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="目录">
              <el-input size="mini" v-model="questionReport.name" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="题型">
              <el-select size="mini" clearable :disabled="isDisabled" v-model="questionReport.questionType" placeholder="请选择题型" @change="changType">
                <el-option label="填空" value="0"></el-option>
                <el-option label="单选" value="1"></el-option>
                <el-option label="多选" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="题目"
              prop="title"
              :rules="[
                { required: true, message: '请输入题目！', trigger: 'blur' },
                { max: 100, message: '不得超出100个字符！', trigger: 'blur' }
              ]"
            >
              <el-input size="mini" v-model="questionReport.title" placeholder="请输入题目"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="题目说明">
              <el-input
                type="textarea"
                size="mini"
                placeholder="请输入说明"
                v-model="questionReport.titleDetail"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="questionReport.questionType !== '0'">
            <el-form-item
              label="选项"
              class="addSelect"
              v-for="(list, i) in questionReport.selectList"
              :key="i"
              :prop="'selectList.' + i + '.content'"
              :rules="[
                { required: true, message: '请输入选项！', trigger: 'blur' },
                { max: 50, message: '不得超出50个字符！', trigger: 'blur' }
              ]"
            >
              <el-input size="mini" v-model="list.content"></el-input>
              <el-button size="mini" plain @click="addSelect">添加</el-button>
              <el-button size="mini" plain @click="delSelect(i)">删除</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="启用">
              <el-switch size="mini" v-model="orgStatus"></el-switch>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="handleClose">取 消</el-button>
        <el-button size="mini" @click="handleClose">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["addQuestionDialog", "addQuestionData", "nodeData", "type"],
  name: "addQuestion",
  data() {
    return {
      questionReport: {
        questionType: "0",
        selectList: []
      },
      // rules: {
      //   title: [
      //     { required: true, message: "请输入题目！", trigger: "blur" },
      //     { max: 100, message: "不得超出100个字符！", trigger: "blur" }
      //   ]
      // },
      // selectList: [],
      orgStatus: true,
      isDisabled: false
    };
  },
  mounted() {
    if (this.addQuestionData.data) {
      this.isDisabled = true;
      this.questionReport = this.addQuestionData.data;
      this.questionReport.questionType = this.addQuestionData.data.questionType.toString();
      if (this.addQuestionData.option) {
        this.$set(this.questionReport, "selectList", this.addQuestionData.option);
        //this.questionReport.selectList = this.addQuestionData.option;
      }
    }
  },
  methods: {
    //题型更改
    changType(type) {
      if (type !== "0") {
        this.questionReport.selectList = [];
        this.questionReport.selectList.push({ content: "" });
      }
    },
    //添加选项
    addSelect() {
      if (this.questionReport.selectList.length >= 26) {
        this.$message.error("选项个数最多26个");
      } else {
        this.questionReport.selectList.push({ content: "" });
      }
    },
    delSelect(i) {
      this.questionReport.selectList.splice(i, 1);
    },
    //新增目录模态框关闭
    handleClose() {
      this.$emit("getDialogStatus", "reload");
    },
    //保存
    save_btn(btn) {
      this.$refs["organizationReport"].validate(valid => {
        if (valid) {
          if (this.orgStatus) {
            this.questionReport.status = "0";
          } else {
            this.questionReport.status = "1";
          }
          this.questionReport.industryId = this.nodeData.id;
          this.questionReport.type = this.type;
          this.questionReport.content = JSON.stringify(this.questionReport.selectList);
          this.$post(btn.uri, this.questionReport).then(res => {
            if (res.data.state === "ok") {
              this.$message.success(res.data.message);
              this.$emit("getDialogStatus", "question");
            } else {
              this.$message.error(res.data.message);
            }
          });
        } else {
          return false;
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
/deep/.el-select {
  width: 100%;
}
.addSelect {
  /deep/.el-form-item__content {
    display: flex;
  }
}
</style>
